<template>
    <div class="app-container">
        <el-form :model="form" label-width="130px" inline size="small">
            <el-form-item label="供应商" label-width="60px">
                <el-input v-model="form.region" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="">
                <el-button type="primary" icon="el-icon-search">查询</el-button>
                <el-button type="primary" plain>+ 新增</el-button>
            </el-form-item>
        </el-form>

        <div class="mt-1" style="height: 680px;">
            <el-table :data="tableData" border height="100%">
                <el-table-column label="序号" width="120" type="index" align="center">
                </el-table-column>
                <el-table-column prop="id" label="ID" width="150" sortable align="center">
                </el-table-column>
                <el-table-column prop="sup" label="供应商名称" width="220" sortable align="center">
                </el-table-column>
                <el-table-column prop="" label="联系人" width="180" sortable align="center">
                </el-table-column>
                <el-table-column prop="tel" label="电话" width="150" sortable align="center">
                </el-table-column>
                <el-table-column prop="address" label="地址" width="300" sortable align="center">
                </el-table-column>
                <el-table-column prop="ep" label="备注" width="300" sortable align="center">
                </el-table-column>
                <el-table-column label="操作" width="200" sortable align="center" fixed="right">
                    <template slot-scope="">
                        <el-button type="primary" size="mini">编辑</el-button>
                        <el-button type="danger" size="mini" plain class="el-icon-delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagin">
            <el-pagination background :current-page="1" :page-sizes="[20, 50, 100, 150]"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :page-size="initParams.pageSize" />
        </div>
    </div>
</template>

<script>
/**
* @author        chenRong
* @time          2023-11-25 09:56:45  星期六
* @description   供应商资料
**/

import { insureAPI } from '@/api/adminstare'
export default {
    data() {
        return {
            form: {
                region: "",
            },
            tableData: [],
            initParams: {
                action: "carMtSupList",
                page: 1,
                pageSize: 20,
            },
            // 分页总条数
            total: 0,
        }
    },
    mounted() { 
        this.getListData()
    },
    methods: {
        async getListData() {
            const result = await insureAPI(this.initParams)
            this.total = result.total
            this.tableData = result.data
            console.log(result);

        },

        // 一页几条数据
        handleSizeChange(val) {
            this.initParams.pageSize = val
            this.getListData();
        },
        // 当前页
        handleCurrentChange(val) {
            this.initParams.page = val
            this.getListData();
        },
    }
}
</script>

<style lang="scss" scoped></style>